<template>
	<view class="Wrapper" :style="styleBox">
		<view class="navBar" :style="BarHeight">
			<view class="left_Bar">
				<block v-if="!tabBar">
					<view class="left_Bar_box" @click="Back()" v-if="fromShare == 0">
						<view class="iconfont icon-xiangzuo size40"></view>
					</view>
					<view class="left_Bar_box" @click="toHome()" v-if="fromShare == 1">
						<view class="iconfont icon-shouye size40"></view>
					</view>
				</block>
			</view>
			<text class="Title ellipsis flexac">{{ title }}</text>

			<!-- #ifdef MP-WEIXIN -->
			<view class="right_Bar">
				<slot name="right_Bar"></slot>
				<view :style="styleBar"></view>
			</view>
			<!-- #endif -->

			<!-- #ifndef MP-WEIXIN -->
			<view class="right_Bar">
				<slot name="right_Bar"></slot>
			</view>
			<!-- #endif -->
		</view>
	</view>
	<view class="topView" :style="topView" v-if="Bot"></view>
</template>

<script setup>
	import { Back, toHome } from '@/utils/utils.js';

	import { ref, computed, watch, onMounted } from 'vue';

	import { useMainStore } from '@/stores/index';
	const mainStore = useMainStore();
	const props = defineProps({
		bgColor: {
			type: String,
			default: '#ffffff',
		},
		color: {
			type: String,
			default: '#000',
		},
		Bot: {
			type: Boolean,
			default: true,
		},
		title: {
			type: String,
			default: '',
		},
		tabBar: {
			type: Boolean,
			default: false,
		},
		borBot: {
			type: Boolean,
			default: false,
		},
		fromShare: {
			type: Number,
			default: 0,
		},
	});

	onMounted(() => {
		// console.log(props.borBot);
	});
	const styleBox = computed(() => {
		return ['height:' + `${mainStore.totalHeight}px`].join(';');
	});
	const navBar = computed(() => {
		return ['height:' + `${mainStore.navBarHeight}px`].join(';');
	});

	const styleBar = computed(() => {
		return [
			'width:' + `${mainStore.capsuleWidth}px`,
			'height:' + `${mainStore.navBarHeight}px`,
		].join(';');
	});

	const BarHeight = computed(() => {
		const arr = ['height:' + `${mainStore.navBarHeight}px`];
		if (props.borBot) arr.push('border-bottom:1rpx solid #f2f2f2');
		return arr.join(';');
	});
	const topView = computed(() => {
		return ['height:' + `${mainStore.totalHeight}px`].join(';');
	});
</script>

<style lang="scss" scoped>
	.Wrapper {
		width: 100%;
		background-color: v-bind('props.bgColor');
		color: v-bind('props.color');
		display: flex;
		align-items: flex-end;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888;

		.navBar {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			.left_Bar {
				position: absolute;
				height: 100%;
				left: 0;
				top: 0;
				.left_Bar_box {
					width: 100%;
					height: 100%;
					display: flex;
					padding: 0 20rpx;
					align-items: center;
				}
			}
			.Title {
				width: 100%;
				height: 100%;

				font-size: 34rpx;
			}
			.right_Bar {
				display: flex;
				align-items: center;
				text-align: right;
				position: absolute;
				height: 100%;
				right: 0;
				top: 0;
			}
		}
	}
	.topView {
		width: 100%;
	}
</style>
